<template>
  <div class="page">
    <div class="bg-white title">
      <span>订单支付</span>
    </div>
    <div class="bg-white card pay-item">
      {{productName}}
      <div>
        <span class="price">¥ {{price}}</span>
        <span class="num">×{{num}}</span>
      </div>
    </div>
    <div class="bg-white card radios">
      <div class="radios-title">支付方式</div>
      <van-radio-group v-model="radio" @change="btn_render">
        <van-cell-group :border="false">
          <van-cell title="支付宝支付" clickable @click="radio = '1'" :border="false">
            <template #icon>
              <van-icon name="../../icons/支付宝@2x.png" size="29px"/>
            </template>
            <template #right-icon>
              <van-radio icon-size="18px" name="1" checked-color="#0B409C"/>
            </template>
          </van-cell>
          <van-cell title="微信支付" clickable @click="radio = '2'" :border="false">
            <template #icon>
              <van-icon name="../../icons/微信@2x.png" size="29px"/>
            </template>
            <template #right-icon>
              <van-radio icon-size="18px" name="2" checked-color="#0B409C"/>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>

    <a v-if="wechat_h5_url&&radio=='2'" :href="wechat_h5_url" target="_blank"> <van-button class="btn btn-pay"  color="#0B3E98" @click="pay">马上支付</van-button></a>
    <van-button v-else class="btn btn-pay"  color="#0B3E98" @click="pay">马上支付</van-button>
    <van-popup v-model="res_show" closeable close-icon-position="top-right">
      <div class="flex pop-container">
        <div class="pop-title">支付结果</div>
        <van-button class="btn"  color="#0B3E98" @click="toEvaulation">已完成支付</van-button>
        <van-button
          class="btn res-error-btn"
          color="#E6E6E6"
          @click="res_show=false"
        >支付遇到问题？</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import $api from '../../api/systemApi'
export default {
  data() {
    return {
      price: 1299,
      num: 1,
      radio: '1',
      res_show: false,
      productName: '',
      userId: '',
      bizzId: '',
      productType: '',
      wechat_h5_url:''
    }
  },
  methods: {
    saveState(){
       let myStorage = window.localStorage;
      let {productName, productType,userId,bizzId} = this
      debugger
      myStorage.setItem(this.bizzId,JSON.stringify( {productName, productType,userId,bizzId}))
    },
    btn_render(){
        if(!this.wechat_h5_url) this.wechatPay()
        this.$nextTick()
    },
    alipay() {
      let { bizzId, userId, productType: productId } = this
      window.open(
        `https://essay.shenqingquan.com/prod-api/aifront/pay/ali_h5_pay?bizzId=${bizzId}&userId=${userId}&productId=${productId}`,
      )
    },
    wechatPay() {
      let { bizzId, userId, productType: productId } = this
      return $api.wechatPay({ bizzId, userId, productId }).then(res => {
        let { h5_url } = JSON.parse(res.data)
        this.wechat_h5_url = h5_url
      })
    },
    pay() {
      let { bizzId, userId, productType: productId } = this
      if (this.radio == '1') {
        this.alipay();
          this.res_show = true
      } else {
        this.wechatPay().then(() => {
          this.res_show = true
        })
      }
    },
    toEvaulation() {
      let { bizzId, userId, productType: productId } = this
      $api.isPayOk({ bizzId, userId, productId }).then(res => {
        if (res.data === 1) this.$router.push('/evaluation?isPaied=true')
        else{
          this.$toast('未支付成功请重试！');
        }
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (to.params) {
        if(to.params.items){
          let { productName, productType } = to.params.items[0]
          vm.productName = productName
          vm.productType = productType
        }
        if (to.params.userId) vm.userId = to.params.userId
        if (to.params.bizzId) {
          vm.bizzId = to.params.bizzId.id
          vm.price = to.params.bizzId.price / 100
        }
      }
    })
  },
  created(){
   window.onpagehide = this.saveState
  },
  unmounted() {
     window.onpagehide = null;
  },
}
</script>

<style scoped>
.page{
  height:calc(100vh - 186px);
}
.radios-title {
  width: 120px;
  height: 42px;
  font-size: 30px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 42px;
  margin-bottom: 22px;
}

.pop-container > .btn {
  width: 473px;
  height: 76px;
}
.res-error-btn {
  margin-top: 50px;
}
.res-error-btn .van-button__text {
  color: #999999;
}
.pop-container {
  width: 600px;
  height: 516px;
  background: #ffffff;
  border-radius: 20px;
  justify-content: initial;
}
.pop-title {
  font-size: 30px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 42px;
  margin: 30px auto 100px;
}
.radios {
  margin-top: 22px;
}
.btn-pay {
  border-radius: 20px;
  margin: 10px 60px;
}
.van-cell {
  align-items: center;
  padding: 18px 0;
  font-size: 30px;
}
.van-cell__title{
  margin-left: 30px;
}
.pay-item .num {
  width: 31px;
  height: 42px;
  font-size: 30px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 42px;
  margin-left: 21px;
  float:right;
}
.pay-item > div {
  margin-top: 20px;
}
.pay-item .price {
  font-size: 36px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ff6060;
  line-height: 50px;
}
.pay-item {
  border-radius: 20px;
  border: 1px solid #05378e;
  margin-bottom: 0;
}
.pay-item {
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 42px;
}
.title {
  width: 750px;
  height: 105px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title > span {
  font-size: 32px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 45px;
}
</style>
